<template>
	<view>
		<view class="tabscon">
			<view :class="[tabsindex == index ? 'color3FA' : '']" v-for="(item, index) in (!show?tabsList:tabs)"
				:key="index" @click="tabsclick(index)">
				{{ setItemData(item) }}{{item.count ? '('+item.count+')':''}}
				<view :class="[tabsindex == index ? 'activetabs' : '']" style="width: 30px;"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			tabsList: {
				type: Array,
				default () {
					return [];
				},
			},
			current: {
				type: [Number, String],
				default: 0
			},
			// 要渲染的字段名
			name: {
				type: String,
				default: "name",
			},
		},
		// 自定义v-model
		model: {
			prop: "current",
			event: "change",
		},
		data() {
			return {
				tabsindex: 0,
				tabs: [],
				show: false
			}
		},
		methods: {
			setItemData(item) {
				const checkType = this.$utils.checkType(item);
				switch (checkType) {
					// 字符串数组直接返回每一项
					case "string":
						return item;
					case "object":
						// 对象数组返回要渲染的字段
						return item[this.name];
					default:
						return item;
				}
			},
			tabsclick(e) {
				this.tabsindex = e
				this.$emit('change', e)
			}
		}
	}
</script>

<style>
	.tabscon {
		height: 88rpx;
		line-height: 88rpx;
		margin-top: 10rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		font-size: 32rpx;
		color: #999;
		border-bottom: 4rpx solid #f7f7f7;
		margin-bottom: 10rpx;
	}

	.tabscon>view {
		width: 50%;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	/* 激活状态样式 */
	.activetabs {
		border-bottom: 8rpx solid #3FA3FA;
		border-radius: 6rpx;
		color: #3FA3FA;
	}
</style>
